<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高温科普及预测平台</title>
    <link rel="stylesheet" href="css/zhuti.css">
    <link href="https://fonts.googlefonts.cn/css?family=Roboto" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/ht.css"> -->
    <!-- 载入bootstrap的css -->
    <!-- <link href="static\bootstrap-5.3.0-alpha1-dist\css\bootstrap.min.css" rel="stylesheet"/> -->
    <!-- 若使用bootstrap的js插件，则必须先导入jquery(因为bootstrap是依赖于jquery的) -->
    <script src="js/jquery-3.7.1.js"></script>
    <!-- 载入bootstrap的js：包括所有的bootstrap的js插件或者可以根据需要使用的js插件的调用 -->
    <script src="js/echarts.min.js"></script>
    <script src="static\bootstrap-5.3.0-alpha1-dist\js\bootstrap.min.js"></script>

</head>

<body>
    <div class="daohang">
        <div>
            <img src="phto/logo.png" alt="logo">
            <p>
                <a href="zhuye.html">高温科普及预测平台</a>
            </p>
        </div>

        <div>
            <p>
                <a href="ht.html">高温介绍</a>
            </p>
        </div>

        <div>
            <p>
                <a href="juece.html">防范决策</a>
            </p>
        </div>
    </div>


    <div class="containter">
        <div class="cebian">
            <ul>
                <li>
                    <a href="zhuye.html">致灾因子危险性</a>
                </li>

                <li>
                    <a href="baolu.html">暴露度</a>
                </li>

                <li>
                    <a href="beizhu.html">备注</a>
                </li>
<!--数据缺失，脆弱性不显示-->
<!--                <li>-->
<!--                    <a href="cuiruo.html">脆弱性</a>-->
<!--                </li>-->

            </ul>
        </div>

        <div class="chaxun">

            <p>查询面板</p>

            <div class="time-radio" name="ageing">
                <p style="margin-top: 30px;">时效</p>
                <label>
                    <input type="radio" value="his" name="time" checked>his
                </label>
                <label>
                    <input type="radio" value="126" name="time">126
                </label>
                <label>
                    <input type="radio" value="245" name="time">245
                </label>
                <label>
                    <input type="radio" value="370" name="time">370
                </label>
                <label>
                    <input type="radio" value="585" name="time">585
                </label>
                <span class="time-selection"></span>
            </div>

            <div>
                <p>
                    致灾因子：
                </p>
                <select class="biaodan" id="causing_factor">
                    <option value="jiduangaowenliang" selected>极端高温量</option>
                    <option value="jiduangaowenrishu">极端高温日数</option>
                    <option value="nuanye">暖夜（TN90p）</option>
                    <option value="nuanzhou">暖昼（TX90p）</option>
                    <option value="xiaririshu">夏日日数（SU）</option>
                    <option value="reyerishu">热夜日数（TR）</option>
                    <option value="nianzuidazuigaowendu">年最大最高温度（TXx）</option>
                    <option value="nianzuixiaozuigaowendu">年最小最高温度（TXn）</option>
                </select>
            </div>

            <div>
                <p>时间：</p>
                <label>
                    <input type="number" value="2022" id="data_year" placeholder="year" class="biaodan">
                </label>
            </div>

            <div>
                <p>
                    数据类型：
                </p>
                <select class="biaodan" id="weather_mod">
                    <option value="bcc_cma">bcc_cma</option>
                    <option value="ACCESS-CM2">ACCESS-CM2</option>
                    <option value="CN0.511">CN05.11</option>
                    <option value="cnrm6">cnrm6</option>
                    <option value="HadGEM3-GC31-LL">HadGEM3-GC31-LL</option>
                    <option value="INM-CM5-0">INM-CM5-0</option>
                    <option value="IPSL-CM6A-LR">IPSL-CM6A-LR</option>
                    <option value="MRI-ESM2-0">MRI-ESM2-0</option>
                    <option value="his">his</option>
                    <option value="China">China_mme</option>
                </select>
            </div>

            <div>
                <button onclick="generateLink()">确定</button>
                <span style="font-size: 18px;" id="isGetting"></span>
            </div>
            <div id="map_label">
                <img src=""
                     style="display: none;width: 260px;object-fit: cover;margin-top: 10px;position: absolute;z-index: 99">
            </div>
            

        </div>

        <div class="zhanshi" id="zhanshi"></div>

        <div id="nanhai" style="display: none;bottom: 10px;right: 140px;width: 200px;z-index: 95;position: absolute">
            <img src="phto/nanhai.png" style="width: 100%;object-fit: cover;transform: translateX(120px) translateY(-53px);">
        </div>

        <div id="shengtuhao" style="display: none;bottom: 10px;right: 140px;width: 200px;z-index: 95;position: absolute">
            <img src="phto/map_GS.png" style="width: 100%;object-fit: cover;transform: translateX(120px);">
        </div>
        
        <script type="text/javascript" src="js\map.js"></script>
        <script type="text/javascript">
            // 生成链接函数
            function generateLink() {
                const type = "hot";
                const ageing = document.querySelector('input[name="time"]:checked').value;
                const causing_factor = document.getElementById("causing_factor").value;
                const weather_mod = document.getElementById("weather_mod").value;
                const data_year = document.getElementById("data_year").value;
                const apiLink = `https://hotdryalert.2ndtool.top/getDataPhoto?type=${type}&ageing=${ageing}&causing_factor=${causing_factor}&weather_mod=${weather_mod}&data_year=${data_year}`;

                let mylabel = document.getElementById('map_label');
                let label_img = mylabel.querySelector("img");
                label_img.style.display = 'block';

                let nanhai = document.getElementById('nanhai');
                nanhai.style.display = 'block';

                let shengtuhao = document.getElementById('shengtuhao');
                shengtuhao.style.display = 'block';

                let img_path = 'phto/label/';
                console.log(causing_factor);
                label_img.src = img_path+'label-'+causing_factor+'.png';
                document.getElementById("isGetting").innerText = "请求中";
                //发送请求并显示返回的数据
                fetch(apiLink)
                    .then(response => response.json())
                    .then(data => {
                        const zhanshiDiv = document.getElementById("zhanshi");
                        document.getElementById("isGetting").innerText = "";
                        if (data.base64_image) {
                            zhanshiDiv.innerHTML = `<img src="${data.base64_image}" alt="Data Image">`;
                        } else if (data.error) {
                            zhanshiDiv.innerText = data.error;
                            console.error('Data not found:', data.error);
                            alert('404 Data not found\n数据不存在，请检查筛选条件');
                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
        </script>
        </div>



</body>

</html>